import React, { useEffect } from 'react';
import { connect, history } from 'umi';
import styles from './index.less';
import { Row, Col, Radio, Card } from 'antd';

const RadioGroup = Radio.Group;
const heroType = [
  { key: 0, value: '全部' },
  { key: 1, value: '战士' },
  { key: 2, value: '法师' },
  { key: 3, value: '坦克' },
  { key: 4, value: '刺客' },
  { key: 5, value: '射手' },
  { key: 6, value: '辅助' },
];

const Hero = ({ heros, filterKey, dispatch }) => {
  useEffect(() => {
    dispatch({
      type: 'hero/fetch',
    });
  }, []);

  const onChange = (e) => {
    dispatch({
      type: 'hero/save',
      payload: {
        filterKey: e.target.value,
      },
    });
  };

  return (
    <div>
      <Card className={styles.radioPanel}>
        <RadioGroup onChange={onChange} value={filterKey}>
          {heroType.map((data) => (
            <Radio value={data.key} key={`hero-rodio-${data.key}`}>
              {data.value}
            </Radio>
          ))}
        </RadioGroup>
      </Card>
      <Row>
        {heros
          .filter((item) => filterKey === 0 || item.hero_type === filterKey)
          .reverse()
          .map((item) => (
            <Col
              key={item.ename}
              span={3}
              className={styles.heroitem}
              onClick={() => history.push(`/hero/${item.cname}`)}
            >
              <img
                src={`https://game.gtimg.cn/images/yxzj/img201606/heroimg/${item.ename}/${item.ename}.jpg`}
              />
              <p>{item.cname}</p>
            </Col>
          ))}
      </Row>
    </div>
  );
};

const mapStateToProps = ({
  hero, // 必须为model的同名namespace
}) => ({
  heros: hero.heros,
  filterKey: hero.filterKey,
});

export default connect(mapStateToProps)(Hero);
